<template>
  <div class="home">
    <el-row :gutter="0">
      <el-col :span="6" v-for="card in cards" :key="card.title">
        <el-card shadow="hover" class="data-card">
          <div class="card-content">
            <div class="card-value">{{ card.value }}</div>
            <div class="card-title">{{ card.title }}</div>
          </div>
          <el-icon class="card-icon" :class="card.color">
            <component :is="card.icon" />
          </el-icon>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="0" class="mt-20">
      <el-col :span="16">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="card-header">
              <span>数据统计</span>
            </div>
          </template>
          <div class="chart-placeholder">
            图表区域
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" class="todo-card">
          <template #header>
            <div class="card-header">
              <span>待办事项</span>
            </div>
          </template>
          <el-table :data="todoList" style="width: 100%" :max-height="300">
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="scope.row.status === '已完成' ? 'success' : 'warning'" size="small">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
const cards = [
  {
    title: '总访问量',
    value: '2,901',
    icon: 'View',
    color: 'blue'
  },
  {
    title: '总销售额',
    value: '¥23,589',
    icon: 'Money',
    color: 'green'
  },
  {
    title: '订单数量',
    value: '1,234',
    icon: 'ShoppingCart',
    color: 'orange'
  },
  {
    title: '用户数量',
    value: '852',
    icon: 'User',
    color: 'purple'
  }
]

const todoList = [
  { title: '完成后台管理系统', status: '进行中' },
  { title: '集成子应用', status: '已完成' },
  { title: '优化性能', status: '进行中' },
  { title: '编写文档', status: '进行中' }
]
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 100px);
  padding: 0;
}

.data-card {
  position: relative;
  overflow: hidden;
  margin: 0;
  height: 108px;
  width: 100%;
  border-radius: 0;
}

.card-content {
  position: relative;
  z-index: 1;
  padding: 20px;
}

.card-value {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #303133;
}

.card-title {
  font-size: 14px;
  color: #909399;
}

.card-icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 64px;
  opacity: 0.2;
}

.blue { color: #409EFF; }
.green { color: #67C23A; }
.orange { color: #E6A23C; }
.purple { color: #909399; }

.mt-20 {
  margin-top: 0;
}

.chart-card, .todo-card {
  height: calc(100vh - 250px);
  width: 100%;
}

.chart-placeholder {
  height: calc(100% - 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  color: #909399;
  border-radius: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 32px;
  color: #303133;
  font-size: 14px;
  font-weight: 500;
}

:deep(.el-card__header) {
  padding: 12px 20px;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-table) {
  height: calc(100% - 48px);
  --el-table-header-bg-color: #f5f7fa;
}

:deep(.el-table__body-wrapper) {
  overflow-y: auto;
  height: calc(100% - 40px);
}

:deep(.el-table th) {
  font-weight: 500;
}

@media screen and (max-height: 800px) {
  .chart-card, .todo-card {
    height: 450px;
  }
  
  .chart-placeholder {
    height: 380px;
  }
}

:deep(.el-card) {
  border-radius: 0;
  border: none;
  margin: 0;
}

:deep(.el-card__body) {
  padding: 16px;
}
</style>
  